<template>
    <div class="step-nlbp" >
        <div class="script-type-container">
            <span class="script-type-label">脚本类型：</span>
            <el-select
                   :disabled="disabled"
                    v-model="scriptType"
                    placeholder="请选择脚本类型"
                    class="script-select"
                    @change="updateScriptType"
            >
                <el-option
                        v-for="type in scriptTypes"
                        :key="type.value"
                        :label="type.label"
                        :value="type.value"
                ></el-option>
            </el-select>
        </div>

        <!--    <el-input
          type="textarea"
          :rows="22"
          placeholder="请输入脚本内容"
          v-model="serviceTextArea"
          :disabled="disabled"
          class="script-textarea"
          style="padding-left: 32px;">
        </el-input>-->
        <span class="script-type-label">脚本内容：</span>
        <monaco-editor v-if="isShow"
                       :disabled="disabled"
                :value="serviceTextArea"
                ref="monacoEditor"
                class="script-textarea"
                :language="currentLanguage"
        ></monaco-editor>
    </div>
</template>

<script >

import {serviceStore} from '@slc/store/service';
import {flowServiceStore} from '@slc/store/flowService';
import {mapActions, mapState} from 'pinia';


import {getScript} from '@slc/api/slc/inventory'
import monacoEditor from './monaco-editor.vue'

export default {
    name: 'step-script',
    components: {
        monacoEditor
    },

    props: {
        disabled: {
            type: Boolean,
            default:  false
        },

    },
    data() {
        return {
            isShow:false,
            scriptType: '', // 存储选中的脚本类型
            scriptTypes: [
                {label: 'Java 语言', value: '1'},
                {label: 'Groovy 语言', value: '2'},
                {label: 'Python 语言', value: '3'}
            ]
        }
    },
    computed: {
        currentLanguage() {
            switch (this.scriptType) {
                case '1':
                    return 'java'
                case '2':
                    return 'groovy'
                case '3':
                    return 'python'
                default:
                    return 'java' // 默认语言
            }
        },

        ...mapState(serviceStore, ['serviceVerId', 'serverReleaseType']),
        ...mapState(flowServiceStore, ['serviceTextArea']),

        // serviceTextArea: {
        //     get() {
        //         return this.serviceTextArea
        //     },
        //     set(val) {
        //         this.setServiceTextArea(val || '')
        //     }
        // }
    },

    watch: {
        // serviceTextArea(newVal) {
        //    this.value=newVal;
        // }
    },
    mounted() {
        this.isShow=false
        this.handleDefaultShow()
    },
    activated() {
        this.handleDefaultShow()
    },
    methods: {
        ...mapActions(flowServiceStore, [
            'setCurrentShape',
            'setServiceTextArea',
            'setServiceScriptType'
        ]),
        updateScriptType(newType) {
            this.setServiceScriptType(newType) // 当 el-select 的值变化时，调用 setServiceScriptType 更新值
            if (newType === '3') {
                // 如果是Python脚本类型，弹出提示并阻止更新
                this.$message.warning('暂不支持 Python 脚本类型，请选择其他类型。')
                return
            }
        },
        // 初始化内容
        async handleDefaultShow() {
            const res = await getScript({serviceVerId: this.serviceVerId})
            // debugger
            if (res.code === '200') {
                this.setServiceTextArea(res.data?.scriptContext || '')
                this.setServiceScriptType( res.data?.scriptType || '')
                this.scriptType =  res.data?.scriptType || ''
                this.isShow =true;
            }
            this.setCurrentShape('custom-start')
        }
    }
}
</script>

<style lang="scss" scoped>
.step-nlbp {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  height: 100%;
}

.script-type-container {
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px;
  margin-top: 20px;
}

.script-type-label {
  font-size: 16px;
  margin-left: 30px; /* 与下拉框的间距 */
  font-weight: bold;
}

.script-select {
  width: 200px;
  height: 40px; /* 设置下拉框的高度 */
  font-size: 18px;

  .el-input__inner {
    height: 100%;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;

    &:hover {
      border-color: #409eff; /* 鼠标悬浮时的边框颜色 */
    }
  }
}

.script-textarea {
  padding: 15px 32px;
  width: 95%; /* 内边距 */
  font-size: 24px !important;
  border-radius: 5px; /* 边框圆角 */
  .el-input__inner {
    border: 1px solid #dcdfe6; /* 边框颜色 */
    transition: all 0.3s ease; /* 过渡效果 */
    &:hover {
      border-color: #409eff; /* 鼠标悬浮时的边框颜色 */
    }
  }
}
</style>
